<template>
  <div class="u_box">
    <!-- 搜索区域 -->
    <div class="search">
      <el-form ref="form" label-width="80px" :inline="true" :model="queryList">
        <el-form-item label="姓名"><el-input size="mini" placeholder="请输入姓名" v-model="queryList.studentName"></el-input></el-form-item>
        <el-form-item label="学号"><el-input size="mini" placeholder="请输入学生学号" v-model="queryList.studentId"></el-input></el-form-item>
        <el-form-item label="学院"><el-input size="mini" placeholder="请输入学院" v-model="queryList.department"></el-input></el-form-item>
        <el-form-item label="年级"><el-input size="mini" placeholder="请输入年级(如:18)" v-model="queryList.grade"></el-input></el-form-item>
        <el-form-item label="宿舍楼"><el-input size="mini" placeholder="请输入宿舍楼" v-model="queryList.buildNo"></el-input></el-form-item>
        <el-form-item label="宿舍号"><el-input size="mini" placeholder="请输入宿舍号" v-model="queryList.dormNo"></el-input></el-form-item>
        <el-form-item label="辅导员"><el-input size="mini" placeholder="请输入辅导员姓名" v-model="queryList.counselor" :disabled="permissions=='2'"></el-input></el-form-item>
      </el-form>
     <div class="searchEvent">
        <el-button type="primary" size="mini" class="el-icon-search" @click="getUserList" style="margin-top:8px">查询</el-button>
        <el-button type="primary" size="mini" class="el-icon-refresh" @click="resetQurey">重置</el-button>
        <el-button type="primary" size="mini" class="el-icon-plus"  @click="toCreate">新增</el-button>
      </div>
    </div>
        <!-- <template slot-scope="scope">
          <el-button @click.native.prevent="resetPsw(scope.row.user_id)" type="text" size="small">
            重置密码
          </el-button>
          <el-button @click.native.prevent="handleDelete(scope.row.typeId)" type="text" size="small">
            删除
          </el-button>
        </template> -->
    <!-- 学生信息列表区域 -->
    <template>
  <el-table :data="studentList" border stripe  width= "100% " height="633px">
      <el-table-column type="expand" fixed>
        <template slot-scope="props" z-index=20>
          <el-form label-position="left" inline class="demo-table-expand">
            <el-row>
              <el-col :span="6"><el-form-item label="寝室类型:">
                {{ props.row.dormType}}
                </el-form-item></el-col>
              <el-col :span="8"><el-form-item label="家庭住址:">{{ props.row.address}}</el-form-item></el-col>
              <el-col :span="6"><el-form-item label="身份证号码:">{{props.row.idCard}}</el-form-item></el-col>
              <el-col :span="4"><el-form-item label="性别">{{props.row.sex== '1'? "女" : "男"}}</el-form-item></el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><el-form-item label="辅导员:">{{props.row.counselor}}</el-form-item></el-col>
              <el-col :span="6"><el-form-item label="辅导员电话:">{{props.row.coPhone}}</el-form-item></el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><el-form-item label="请假去向:">{{props.row.destination}}</el-form-item></el-col>
              <el-col :span="8"><el-form-item label="最近请假时间:" >{{props.row.leaveTimeStart}} {{props.row.leave== '1'? " 至 " : ""}}{{props.row.leaveTimeEnd}}</el-form-item></el-col>
            </el-row>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="姓名"  prop="studentName" show-overflow-tooltip>
        <template slot-scope="props">
          <span v-if="props.row.isDon=='1'" class="el-icon-star-on">
          </span>
          {{props.row.studentName}}
        </template>
      </el-table-column>
      <el-table-column label="学号" prop="studentId" width="150px"></el-table-column>
      <el-table-column label="学院" prop="department" show-overflow-tooltip></el-table-column>
      <el-table-column label="班级" prop="professional" show-overflow-tooltip>
        <template slot-scope="props">
          {{props.row.professional}}{{props.row.class}}
        </template>
      </el-table-column>
      <el-table-column label="宿舍楼">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit && !scope.row.null">{{scope.row.buildNo}}</span>
          <el-select v-model="commitEditList.buildNo" filterable v-bind:placeholder="scope.row.buildNo"  v-show="scope.row.isEdit"  @change="qureyDormNo('edit')">
            <el-option
              v-for="item in buildNoList"
              :key="item.buildNo"
              :label="item.buildNo"
              :value="item.buildNo">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="宿舍号">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit && !scope.row.null">{{scope.row.dormNo}}</span>
          <el-select v-model="commitEditList.dormNo" filterable v-bind:placeholder="scope.row.dormNo"  v-show="scope.row.isEdit"  @change="qureyBedNo('edit')">
            <el-option
              v-for="item in dormNoList"
              :key="item.dormNo"
              :label="item.dormNo"
              :value="item.dormNo">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="床位">
        <template slot-scope="scope">
          <span v-show="!scope.row.isEdit && !scope.row.null">{{scope.row.bedNo}}</span>
          <el-select  v-model="commitEditList.bedNo" v-bind:placeholder="scope.row.bedNo" v-show="scope.row.isEdit" filterable> 
            <el-option
              v-for="item in bedNoList"
              :key="item.bedNo"
              :label="item.bedNo"
              :value="item.bedNo"
              >
              <!-- v-bind:disabled="item.isLive=='1'" -->
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="是否住宿">
        <template slot-scope="props">
          <!-- <el-button type="success" icon="el-icon-check" circle size='mini' v-show="props.row.null=='1'"></el-button> -->
          <i class="el-icon-close"  v-show="props.row.isNull=='0'"></i>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200px">
        <template slot-scope="scope">
          <el-button type="primary" round v-bind:disabled="isDisableEdit" size="mini"  v-show="!scope.row.isEdit" @click="toEdit(scope.$index,scope.row)">编辑</el-button>
          <!-- <el-button type="primary" round v-bind:disabled="isDisableEdit" v-show="!scope.row.isEdit && permissions=='2' && !scope.row.isDon" size="mini" @click="toBeDon(scope.$index,scope.row)">设为舍长</el-button> -->

          <el-button type="success" icon="el-icon-check"  circle size='mini' v-show="scope.row.isEdit" title="确认修改" @click="checkEdit(scope.$index,scope.row)"></el-button>
          <el-button type="primary" icon="el-icon-lock" circle size='mini' title="重置密码" v-show="scope.row.isEdit && scope.row.isDon"  @click="resetPsw(scope.row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle size='mini'  v-show="scope.row.isEdit"  title="删除" @click="deleteStudentDorm(scope.row)"></el-button>
          <el-button type="info" icon="el-icon-close" circle  size='mini'  v-show="scope.row.isEdit"  title="取消" @click="toCloseEdit(scope.$index,scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    </template>
    <!-- 增加学生区域 -->
    <el-dialog title="增加学生信息" :visible.sync="addStudentVisible" :modal-append-to-body="false" center width="650px">
      <el-form label-width="95px" :rules="addFormRules" ref="addStudentForm" :model="addStudentForm" label-position="left" :inline="true">
        <el-form-item label="学生姓名"  prop="studentName">
          <el-input v-model="addStudentForm.studentName"></el-input>
          </el-form-item>
        <el-form-item label="学号" prop="studentId">
          <el-input  v-model="addStudentForm.studentId"></el-input>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-select v-model="addStudentForm.sex" filterable placeholder="请选择">
            <el-option
              v-for="item in sexList"
              :key="item.sex"
              :label="item.sex"
              :value="item.index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证" prop="idCard">
          <el-input  v-model="addStudentForm.idCard"></el-input>
        </el-form-item>
        <el-form-item label="学院" ref="department"  prop="department">
          <el-input v-model="addStudentForm.department"></el-input>
          </el-form-item>
        <el-form-item label="专业班级"  prop="professional">
          <el-input  v-model="addStudentForm.professional"></el-input>
          </el-form-item>
        <el-form-item label="宿舍楼"  prop="buildNo">
          <el-select v-model="addStudentForm.buildNo" filterable placeholder="请选择" @change="qureyDormNo('add')">
            <el-option
              v-for="item in buildNoList"
              :key="item.buildNo"
              :label="item.buildNo"
              :value="item.buildNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="宿舍号"  prop="dormNo">
          <el-select v-model="addStudentForm.dormNo" filterable placeholder="请选择" @change="qureyBedNo('add')"> 
            <el-option
              v-for="item in dormNoList"
              :key="item.dormNo"
              :label="item.dormNo"
              :value="item.dormNo">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="床位"  prop="bedNo">
          <el-select  v-model="addStudentForm.bedNo" filterable placeholder="请选择"> 
            <el-option
              v-for="item in bedNoList"
              :key="item.bedNo"
              :label="item.bedNo"
              :value="item.bedNo"
              >
              <!-- v-bind:disabled="item.isLive=='1'" -->
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="家庭住址" prop="address"><el-input  v-model="addStudentForm.address"></el-input></el-form-item>
        <el-form-item label="辅导员" prop="counselor"><el-input  v-model="addStudentForm.counselor"></el-input></el-form-item>
        <el-form-item label="辅导员电话" prop="coPhone"><el-input  v-model="addStudentForm.coPhone"></el-input></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addStudentVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitAdd('addStudentForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页区域 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout=" prev, pager, next, sizes, jumper" :total="total" :page-sizes="[4, 8, 10, 20]">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import {getPermissions,getUserName} from "@/utils/auth";
export default {
  name: 'user',
  data() {
    // 校验规则
       const validateNum = (rule, value, callback) => {
      const phone= /^1\d{10}$/    //以1开头的数字
      //const phone= /^[0-9]*$/
      // console.log(phone.test(value))
      // console.log(value)
      if (!(phone.test(value)) && value) {
        callback(new Error('手机号格式不正确'))
      }else{
        callback()
      }
    }
    const validateId = (rule, value, callback) => {
      const phone= /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!(phone.test(value)) && value) {
        callback(new Error('格式不正确'))
      }else{
        callback()
      }
    }
    return {
      // 查询到的学生列表
      studentList: [],
      // 新增列表
      addStudentForm: {
        studentId:'',
        studentName:'',
        sex:'',
        idCard:'',
        department:'',
        // grade:''
        professional:'',
        buildNo:'',
        dormNo:'',
        bedNo:'',
        dormType:'',
        address:'',
        counselor:'',
        coPhone:'',
        /* isDon:'',
        isNull:'1' */
      },
      // 编辑提交按钮可用
      formChange:true,
      //模糊查询列表
      queryList: {
        studentName:'',
        studentId:'',
        department:'',
        buildNo:'',
        dormNo:'',
        grade:'',
        counselor:''
      },
      // 是否可以编辑
      isEdit:true,
      // 权限
      permissions:'',
      // 禁用编辑（每次只能编辑一个）
      isDisableEdit:false,
      // 提交编辑信息
      commitEditList:{
        studentId:'',
        bedNo:'',
        buildNo:'',
        dormNo:'',
      },

      // 控制新增学生弹框
      addStudentVisible:false,
      // 宿舍楼号列表
      buildNoList:[],
      dormNoList:[],
      bedNoList:[],
      
      sexList:[
        {
          index:'1',
          sex:"女"
        },{
          index:'2',
          sex:"男"
        }
      ],
      checked:false,
      username: "",
      pageNum: 1, //默认第一页
      total:0, //总条数
      pageSize:4, //默认第一页展示4条
      // 浏览器窗口宽度
      innerWidth:true,
      // 社长颜色
      color:'red',
      // 验证规则
      addFormRules:{
        studentName:[{
          required: true,
          message: '请输入姓名',
          trigger: 'blur' 
        }],
        studentId:[{
          required: true,
          message: '请输入学号',
          trigger: 'blur' 
        }],
        sex:[{
          required: true,
          message: '请选择性别',
          trigger: 'blur'
        }],
        idCard:[{
            required: true,
            message: '请输入身份证',
            trigger: 'blur'
        },{
          required: true,
          min:18,
          max:18,
          message: '请输入正确的身份证号',
          trigger: 'blur'
        },
       /*  {
          validator: validateId,
          trigger: "blur"
          } */
        ],
        department:[{
          required: true,
          message: '请输入学院',
          trigger: 'blur'
        }],
        professional:[{
           required: true,
          message: '请输入专业班级',
          trigger: 'blur'
        }],
        buildNo:[{
            required: true,
            trigger: 'blur',
            message: '宿舍楼不能为空'
        }],
        dormNo:[{
            required: true,
            trigger: 'blur',
            message: '宿舍号不能为空'
        }],
        bedNo:[{
            required: true,
            trigger: 'blur',
            message: '床号不能为空'
        }],
        address:[{
            required: true,
            trigger: 'blur',
            message: '家庭住址不能为空'
        }],
        counselor:[{
            required: true,
            trigger: 'blur',
            message: '辅导员姓名不能为空'
        }],
        coPhone:[{
            required: true,
            trigger: 'blur',
            message: '手机号不能为空'
        },
        {
          min:7,
          max:11,
          message: '长度在7~11个字符',
          trigger: "blur"
          },
        {
          validator: validateNum,
          trigger: "blur"
        }]
      }
    }
  },
  mounted() {
    // 加载列表
    this.getUserList();
    this.getBuildNo()
    // 权限
    this.getRole()
  },
  methods: {   
    // 浏览器窗口
    getRole(){
      this.permissions = getPermissions()
      if(this.permissions=='2'){
      this.queryList.counselor = getUserName()
      }

      console.log(this.permissions);
    },
    // 加载所有学生信息
    getUserList() {
      var queryList = this.queryList
      var pageNum = this.pageNum
      var pageSize = this.pageSize
      request({
        url: "/api/studentInfo/getStudentList",
        method: "post",
        data: {
          queryList,
          pageNum,
          pageSize
        }
      }).then(res => {
        console.log(res);
        if (res.status === 200) {
          this.studentList = res.list;
          console.log(this.studentList)
          this.total = res.paging.total;
          this.pageNum = res.paging.pageNum;
          this.pageSize = res.paging.pageSize;
        }
      });
    },
    // 查询是宿舍楼号
    getBuildNo(){
      request({
        url: "/api/studentInfo/getBuildNo",
        method: "post",
        data: {}
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.buildNoList = res.list;
        }
      });
    },
    resetPsw(row) {
      // 确认重置密码提示框
      this.$confirm('此操作将初始化该用户的密码，是否继续', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: "/api/studentInfo/resetPassword",
            method: "post",
            data: {
              studentId:row.studentId
            }
          }).then(res => {
            console.log(res);
            if (res.status === 1) {
              this.$message({
                type: 'success',
                message: '重置成功!'
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置操作'
          });          
        });
    },
    // 删除学生住宿信息
    deleteStudentDorm(row){
      this.$confirm('此操作将删除学生的住宿信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        request({
          url: "/api/studentInfo/deleteStudentDorm",
          method: "post",
          data: {
            studentId:row.studentId,
            buildNo:'',
            dormNo:'',
            bedNo:'',
          }
        }).then(res => {
          console.log(res);
          if (res.status === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.isDisableEdit = !this.isDisableEdit
            this.getUserList()
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除操作'
        });          
      });
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getUserList()
    },
    handleCurrentChange(val) {
     this.pageNum = val
    this.getUserList()
    },
    // 重置
    resetQurey(){
      this.queryList.studentName = '',
      this.queryList.studentId = '',
      this.queryList.department = '',
      this.queryList.buildNo = '',
      this.queryList.dormNo = '',
      this.queryList.grade = ''
      this.getUserList()
    },
    // 创建新用户
    toCreate() {
      this.addStudentVisible=true
      
    },
    // 新增用户信息查询宿舍号
    qureyDormNo(type){
      console.log(type);
      if (type == 'edit') {
        var buildNo = this.commitEditList.buildNo
      }else{
        var buildNo = this.addStudentForm.buildNo
      }
      this.addStudentForm.dormNo='',
      this.addStudentForm.bedNo='',
      request({
        url: "/api/studentInfo/addDormNo",
        method: "post",
        data: {
         buildNo:buildNo
        }
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.dormNoList = res.list;
        }
      });
    },
    qureyBedNo(type){
      this.addStudentForm.bedNo=""
      if (type == 'edit') {
        var buildNo = this.commitEditList.buildNo
        var dormNo = this.commitEditList.dormNo
      }else{
        var buildNo = this.addStudentForm.buildNo
        var dormNo = this.addStudentForm.dormNo

      }
      request({
        url: "/api/studentInfo/addBedNo",
        method: "post",
        data: {
         buildNo: buildNo,
         dormNo: dormNo,
         isLive:'0'

        }
      }).then(res => {
        console.log(res);
        if (res.msg === "查询成功") {
          this.bedNoList = res.list;

        }
      });
    },
    // 提交新增信息
    commitAdd(addStudent){
      this.$refs[addStudent].validate((valid) => {
        var addStudentForm = this.addStudentForm
        if (!valid) {
          alert('请将信息填写完整!');
        } else{
          request({
            url: "/api/studentInfo/addStudentDorm",
            method: "post",
            data: {
              commit: addStudentForm
            }
          }).then(res => {
            console.log(res);
            if (res.status === "1") {
              this.$message({
                message: "新增成功",
                type: "success"
              });
            }
          });
        }
      }),
      this.addStudentVisible = false,
      his.isDisableEdit = !this.isDisableEdit
      this.$refs[addStudentForm].resetFields();
      this.getUserList()
    },
    // 编辑消息
    toEdit(index,row) {
      this.$set(row, 'isEdit', true)
      this.isDisableEdit = !this.isDisableEdit
    },
    // 取消编辑信息
    toCloseEdit(index,row) {
      this.$set(row, 'isEdit', false)
      this.isDisableEdit = !this.isDisableEdit
      this.formChange = true
    },
    // 编辑提交按钮是否可用
    commitChange(){
      this.formChange = false
    },
    // 确认编辑
    checkEdit(index,row){
      this.commitEditList.studentId = row.studentId
      var commitEditList =this.commitEditList
      console.log(this.commitEditList);
       this.$confirm('此操作修改此学生的住宿信息', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: "/api/studentInfo/editStudentDorm",
            method: "post",
            data: commitEditList
          }).then(res => { 
            console.log(res);
            if (res.status === 1) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置操作'
          });          
        });
      this.$set(row, 'isEdit', false)
      this.isDisableEdit = !this.isDisableEdit
      this.getUserList()

    }
  }
}
</script>
<style lang="scss" scoped>
.u_box {
  height: 100%;
  margin: auto;
  .search {
    width: 100%;
    background: white;
  }
  .el-form-item {
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .searchEvent {
    float: right;
    margin-left: 59px;
    margin-bottom: 15px;
  }
  .page {
    width: 30%;
    margin: auto;
    margin-top: 10px;
  }
  .el-dialog .el-input {
    width: 150px;
  }
  .el-dialog .el-form-item{
    margin-bottom: 20px;
  }
}

</style>
